<script setup lang="ts">
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Check } from "lucide-vue-next";

enum PopularPlan {
  NO = 0,
  YES = 1,
}

const gotoUse = () => {

    const buy =   window.location.search.includes('skip=false')
    // console.log(window.location.hash)
    if (buy){
        alert('请点击上方直接购买')
    }else {
        window.open('https://copy.ezrpa.store/register?aff=xxdlovo')
        // alert('跳转后注册购买')
    }
}
interface PlanProps {
  title: string;
  popular: PopularPlan;
  price: number;
  description: string;
  buttonText: string;
  benefitList: string[];
}

const plans: PlanProps[] = [
  {
    title: "免费/普通",
    popular: 0,
    price: 0,
    description:
      "所有功能按次收费,适合偶尔使用的用户.",
    buttonText: "开始使用",
    benefitList: [
      "最多支持2个账户",
      "应用迁移 5💰",
      "应用备份",
      "应用更新 2💰",
      "应用加密 50💰",
      "内部 5💰",
      "官方应用和指令 18💰",
      "第三方应用市场 25💰",
      "云元素库 25💰",
      "从链接复制 25💰",
      "创业板小号 2💰",
      "创业板续费 30💰",
      "批量更新 ❌",
    ],
  },
  {
    title: "大杯/开发者版",
    popular: 1,
    price: 29,
    description:
      "适合开发者和学习者使用,方便部署应用的客户账号中.",
    buttonText: "开始使用",
      benefitList: [
          "最多支持4个账户",
          "应用迁移",
          "应用备份",
          "应用更新",
          "应用加密 50💰",
          "内部依赖",
          "云元素库",
          "官方应用和指令 18💰",
          "第三方应用市场 ❌",
          "从链接复制 ❌",
          "创业板小号 1.5💰",
          "创业板续费 25💰",
          "批量更新 ❌",
      ],
  },
    {
        title: "超大杯/团队版",
        popular: 0,
        price: 69,
        description:
            "适合团队使用,可以批量更新应用,优惠价格购买和续费创业板.",
        buttonText: "开始使用",
        benefitList: [
            "最多支持12个账户",
            "应用迁移",
            "应用备份",
            "应用更新",
            "应用加密",
            "内部依赖",
            "云元素库",
            "官方应用和指令",
            "第三方应用市场",
            "从链接复制",
            "创业板小号 1💰",
            "创业板续费 20💰",
            "批量更新",
        ],
    },
  {
    title: "定制",
    popular: 0,
    price: 0,
    description:
      "所有功能都可定制化包月,联系我们吧",
    buttonText: "联系我们",
    benefitList: [
      "所有功能",
    ],
  },
];
</script>

<template>
  <section id="pricing" class="container py-24 sm:py-32">
    <h2 class="text-lg text-primary text-center mb-2 tracking-wider">
      价格
    </h2>

    <h2 class="text-3xl md:text-4xl text-center font-bold mb-4">
      了解下价格吧(活动期间8折优惠)
    </h2>

    <h3
      class="md:w-1/2 mx-auto text-xl text-center text-muted-foreground pb-14"
    >
      没有想要的套餐? 联系我们试试
    </h3>

    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-4">
      <Card
        v-for="{
          title,
          popular,
          price,
          description,
          buttonText,
          benefitList,
        } in plans"
        :key="title"
        :class="{
          'drop-shadow-xl shadow-black/10 dark:shadow-white/10 border-[1.5px] border-primary lg:scale-[1.1]':
            popular === PopularPlan?.YES,
        }"
      >
        <CardHeader>
          <CardTitle class="pb-2">
            {{ title }}
          </CardTitle>

          <CardDescription class="pb-4">{{ description }}</CardDescription>

          <div>
            <span class="text-3xl font-bold">￥{{ price }}</span>
            <span class="text-muted-foreground"> /月</span>
          </div>
        </CardHeader>

        <CardContent class="flex">
          <div class="space-y-4">
            <span
              v-for="benefit in benefitList"
              :key="benefit"
              class="flex"
            >
              <Check class="text-primary mr-2" />
              <h3>{{ benefit }}</h3>
            </span>
          </div>
        </CardContent>

        <CardFooter>
          <Button
            :variant="popular === PopularPlan?.NO ? 'secondary' : 'default'"
            class="w-full"
          >
              <a
                      @click="gotoUse"

              >{{ buttonText }}
              </a>
          </Button>
        </CardFooter>
      </Card>
    </div>
  </section>
</template>
